<template>
	<div style="padding: 40px">
		<el-table :data="tableList" max-height="500" border>
			<el-table-column prop="name" label="姓名">
				<template v-slot:header>
					<div>
						<span class="table-heard-filter">姓名</span>
						<span
							class="el-icon-caret-bottom"
							@click="filterData($event, 'name')"
							style="display: inline-block; width: 10px; height: 10px; background-color: red"
						>
						</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="address" label="地址">
				<template v-slot:header>
					<div>
						<span class="table-heard-filter">地址</span>
						<span
							class="el-icon-caret-bottom"
							@click="filterData($event, 'address')"
							style="display: inline-block; width: 10px; height: 10px; background-color: red"
						>
						</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="date" label="时间">
				<template v-slot:header>
					<div>
						<span class="table-heard-filter">时间</span>
						<span
							class="el-icon-caret-bottom"
							@click="filterData($event, 'date')"
							style="display: inline-block; width: 10px; height: 10px; background-color: red"
						>
						</span>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<tool
			v-if="showFilterTool"
			:seachData="seachData"
			@saveSeach="saveSeach"
			:allOptionsObj="allOptionsObj"
			:seachType="seachType"
			:filterToolLeft="filterToolLeft"
			:filterToolTop="filterToolTop"
			@closeTool="closeTool"
		/>
	</div>
</template>
<script>
import tool from './tool.vue';
export default {
	name: 'test',
	components: {
		tool,
	},
	data() {
		return {
			seachData: {
				name: [],
				address: [],
				date: [],
			},
			seachType: '',
			allOptionsObj: {
				name: ['王小虎', '小明', '小红', '小兰'],
				address: ['北京', '上海', '广州', '深圳', '长沙'],
				date: ['2016', '2017', '2017', '2019'],
			},
			positionTypeList: [],
			tableList: [],
			// 分页数据
			editType: '',
			showFilterTool: false,
			filterToolTop: 0,
			filterToolLeft: 0,
		};
	},
	methods: {
		filterData(e, type) {
			this.showFilterTool = false;
			this.$nextTick(() => {
				this.seachType = type;
				this.filterToolTop = e.pageY;
				this.filterToolLeft = e.pageX;
				this.showFilterTool = true;
			});
		},
		closeTool() {
			this.showFilterTool = false;
		},
		saveSeach(data) {
			console.log('确定返回结果', data);
			this.seachData = data;
			this.closeTool();
		},
		close() {
			this.showAdd = false;
		},
		saveBatch(data) {
			// 查询条件
			console.log(data);
		},
		getList() {
			this.tableList = [
				{
					date: '2019',
					name: '王小虎',
					address: '上海',
				},
				{
					date: '2016',
					name: '小明',
					address: '北京',
				},
				{
					date: '2017',
					name: '小红',
					address: '长沙',
				},
				{
					date: '2018',
					name: '小兰',
					address: '深圳',
				},
				{
					date: '2018',
					name: '小兰',
					address: '长沙',
				},
			];
		},
	},
	created() {
		this.getList();
	},
};
</script>
<style scoped>
.table-heard-filter {
	margin-right: 10px !important;
}
.fitlter-btn {
	border: #000 solid 1px;
	padding: 1px;
	background: #1890ff;
	color: #fff;
	border-radius: 5px;
}
</style>
